<html>
    <head>
        <title>Itowns - Globe</title>

        <style type="text/css">
            html {
                height: 100%;
            }

            body {
                margin: 0;
                overflow:hidden;
                height:100%;
            }

            #viewerDiv {
                position: absolute;
                left: 0%;
                width: 50%;
                height: 100%;
            }
            #planarDiv {
                position: absolute;
                left: 50%;
                width: 50%;
                height: 100%;
            }

            #menuDiv {
                position: absolute;
                top:0px;
                margin-left: 0px;
            }

            @media (max-width: 600px) {
                #menuDiv {
                    display: none;
                }
            }
        </style>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
    </head>
    <body>
        <div id="viewerDiv"></div>
        <div id="planarDiv"></div>
        <script src="js/GUI/GuiTools.js"></script>
        <script src="../dist/itowns.js"></script>
        <script src="../dist/debug.js"></script>
        <script type="text/javascript">
            // Define projection that we will use (taken from https://epsg.io/3946, Proj4js section)
            itowns.proj4.defs('EPSG:3946', '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
            /* global itowns, document, GuiTools, Promise */
            var placement = {
                coord: new itowns.Coordinates('EPSG:4326', 4.838, 45.756),
                range: 1000,
            }
            var extent = new itowns.Extent(
                'EPSG:3946',
                1837816.94334, 1847692.32501,
                5170036.4587, 5178412.82698);

            // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
            var viewerDiv = document.getElementById('viewerDiv');
            var planarDiv = document.getElementById('planarDiv');

            // Instanciate iTowns GlobeView*
            var view = new itowns.GlobeView(viewerDiv, placement);
            var planarView = new itowns.PlanarView(planarDiv, extent, { placement });

            var promises = [];
            var menuGlobe = new GuiTools('menuDiv', view);
            var overGlobe = true;

            // eslint-disable-next-line
            new itowns.PlanarControls(planarView, {});

            viewerDiv.addEventListener('mousemove', function _() {
                overGlobe = true;
            }, false);

            planarDiv.addEventListener('mousemove', function _() {
                overGlobe = false;
            }, false);

            promises.push(itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
                config.source = new itowns.WMTSSource(config.source);
                var layer = new itowns.ColorLayer(config.id, config);
                view.addLayer(layer);
            }));

            // Listen for globe full initialisation event
            view
                .addEventListener(itowns.GLOBE_VIEW_EVENTS.GLOBE_INITIALIZED,
                    function globeInitialized() {
                        // eslint-disable-next-line no-console
                        console.info('Globe initialized');
                        Promise.all(promises).then(function init() {
                            var planarCamera = planarView.camera.camera3D;
                            var globeCamera = view.camera.camera3D;
                            var params;
                            menuGlobe.addImageryLayersGUI(view.getLayers(function filterColor(l) { return l.isColorLayer; }));
                            menuGlobe.addElevationLayersGUI(view.getLayers(function filterElevation(l) { return l.isElevationLayer; }));

                            function sync() {
                                if (overGlobe) {
                                    params = itowns.CameraUtils
                                        .getTransformCameraLookingAtTarget(
                                            view, globeCamera);
                                    itowns.CameraUtils
                                    .transformCameraToLookAtTarget(
                                            planarView, planarCamera, params);
                                } else {
                                    params = itowns.CameraUtils
                                        .getTransformCameraLookingAtTarget(
                                            planarView, planarCamera);
                                    itowns.CameraUtils
                                        .transformCameraToLookAtTarget(
                                                view, globeCamera, params);
                                }
                            }
                            sync();
                            view
                                .addFrameRequester(itowns
                                    .MAIN_LOOP_EVENTS.AFTER_CAMERA_UPDATE, sync);
                            planarView
                                .addFrameRequester(itowns
                                    .MAIN_LOOP_EVENTS.AFTER_CAMERA_UPDATE, sync);
                        }).catch(console.error);
                    });

            var wmsImagerySource = new itowns.WMSSource({
                extent: extent,
                name: 'Ortho2009_vue_ensemble_16cm_CC46',
                url: 'https://download.data.grandlyon.com/wms/grandlyon',
                version: '1.3.0',
                projection: 'EPSG:3946',
                format: 'image/jpeg',
            });

            var wmsImageryLayer = new itowns.ColorLayer('wms_imagery', {
                updateStrategy: {
                    type: itowns.STRATEGY_DICHOTOMY,
                    options: {},
                },
                source: wmsImagerySource,
            });
            planarView.addLayer(wmsImageryLayer);
            var d = new debug.Debug(view, menuGlobe.gui);
            debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
        </script>
    </body>
</html>
